<template>
    <n-config-provider
        :local="naiveLocal"
        :date-locale="naiveDataLocal"
        :theme-overrides="naiveTheme"
        :theme="naiveDarkTheme"
        class="h-full"
    >
        <n-global-style />
        <n-loading-bar-provider>
            <n-dialog-provider>
                <n-notification-provider>
                    <n-message-provider>
                        <router-view />
                    </n-message-provider>
                </n-notification-provider>
            </n-dialog-provider>
        </n-loading-bar-provider>
    </n-config-provider>
</template>

<script setup lang="ts">
import {
    NConfigProvider,
    darkTheme,
    useDialog,
    useLoadingBar,
    useMessage,
    useNotification,
    type GlobalThemeOverrides
} from "naive-ui"
import { brightenColor } from "./utils"
import { useAppStore } from "./store/modules/app"
import { useThemeStore } from "./store/modules/theme"

const appStore = useAppStore()
const themeStore = useThemeStore()
const naiveLocal = computed(() => appStore.localInfo.local)
const naiveDataLocal = computed(() => appStore.localInfo.dateLocal)
const naiveDarkTheme = computed(() => (themeStore.isDark ? darkTheme : undefined))
const naiveTheme = computed((): GlobalThemeOverrides => {
    // const primaryColor = theme.value.primaryColor
    // const primaryColorHover = brightenColor(primaryColor)
    return {
        // common: {
        //     primaryColor: primaryColor,
        //     primaryColorHover: primaryColorHover,
        //     primaryColorPressed: primaryColorHover,
        //     primaryColorSuppl: primaryColor
        // },
        Button: {
            heightMedium: "30px"
        }
    }
})
</script>
